<template>
  <div class="m-classify-mange">
    <div class="add-btn">
      <w-button type="option" @on-click="openPanel('one', '')">新增一级菜单</w-button>
    </div>
    <!-- 新增菜单 -->
    <div class="m-add-options">
      <!-- 菜单名称 -->
      <w-table :columns="columns"></w-table>
      <!-- 菜单列表 -->
      <div class="add-classify" v-for="(val, index) in menuList.menu" :key='index'>
        <!-- 一级菜单 -->
        <div class="classify-one clearfix menu">
          <div class="clssify fl">
            <div class="icon-checkbox">
              <w-checkbox v-model='val.isChecked' :label='val.oneMenuId' @on-change='checkedMenu'></w-checkbox>
            </div>
            <span class="icon-classify" :class="{'icon-more': val.isShow, 'icon-little': !val.isShow}" @click="val.isShow = !val.isShow"></span>
            <span style="font-size: 14px;">{{val.oneMenu}}</span>
            <button class="add" @click="openPanel('one', val.oneMenuId)">+新增下级</button>
          </div>
          <div class="options">
            <div class="edit">
              <span class="icon-edit"></span>
              <span class="icon-text" @click="modifyMenu(val.oneMenuId, val.oneMenu, val.oneMenuCode)">修改</span>
            </div>
            <div class="del">
              <span class="icon-del"></span>
              <span class="icon-text" @click="deleteMenu(val.oneMenuId)">删除</span>
            </div>
          </div>
        </div>

        <!-- 二级菜单 -->
        <div v-if="val.isShow">
          <div class="classify-one clearfix" v-for="(v, i) in val.twoList" :key='i'>
            <div class="menu">
              <div class="clssify fl">
                <div class="icon-checkbox" style="margin-right: 110px;">
                  <w-checkbox v-model='v.isChecked' :label='v.twoMenuId' @on-change='checkedMenu(v.twoMenuId)'></w-checkbox>
                </div>
                <span class="icon-classify" :class="{'icon-more': v.isShow, 'icon-little': !v.isShow}" @click="v.isShow = !v.isShow"></span>
                <span>{{v.twoMenuName}}</span>
                <button class="add" @click="openPanel('three', v.twoMenuId)">+新增下级</button>
              </div>
              <div class="options">
                <div class="edit">
                  <span class="icon-edit"></span>
                  <span class="icon-text" @click="modifyMenu(v.twoMenuId, v.twoMenuName, v.twoMenuCode)">修改</span>
                </div>
                <div class="del">
                  <span class="icon-del"></span>
                  <span class="icon-text" @click="deleteMenu(v.twoMenuId)">删除</span>
                </div>
              </div>
            </div>
          
            <!-- 三级菜单 -->
            <div v-if="v.threeList && v.threeList.length > 0 && v.isShow">
              <div class="classify-one clearfix menu three" v-for='(value, three) in v.threeList' :key="three" >
                <div class="clssify fl">
                  <div class="icon-checkbox" style="margin-right: 142px;">
                    <w-checkbox  v-model='value.isChecked' :label='value.threeMenuId' @on-change='checkedMenu(value.threeMenuId)'></w-checkbox>
                  </div>
                  <span>{{value.threeMenuName}}</span>
                </div>
                <div class="options">
                  <div class="edit">
                    <span class="icon-edit"></span>
                    <span class="icon-text" @click="modifyMenu(value.threeMenuId, value.threeMenuName, value.threeMenuCode, value.path)">修改</span>
                  </div>
                  <div class="del">
                    <span class="icon-del"></span>
                    <span class="icon-text" @click="deleteMenu(value.threeMenuId)">删除</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- 全选 -->
      <div class="all-checked">
        <div class="clssify fl">
          <div class="icon-checkbox" style="margin-right: 40px;">
            <w-checkbox :label='`all`' v-model="all" @on-change='checkedAll'>
              <span>全选</span>
            </w-checkbox>
          </div>
          <span class="icon-text" @click="deleteMenu('all')">删除</span>
        </div>
      </div>
    </div>

    <div class="clearfix">
      <!-- 分页 -->
      <div class="fr" style="margin-top: 20px">
        <w-paging :current="menuList.currentPage" :total="menuList.totalPageCount" @on-page='changePage'></w-paging>
      </div>
    </div>

    <!-- 新增菜单 -->
    <w-panel-validate v-model="menuPanel"  :panel-title="true" title="新增菜单" :width="`380px`" :height="`316px`" @on-confirm='submitAddMenu'>
      <div class="panel-classify">
        <div>
          <span class="title">菜单编号</span>
          <div class="name">
            <w-input :holder='`请填写`' v-model="addParams.menuC" rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div>
          <span class="title">菜单名称</span>
          <div class="name">
            <w-input :holder='`请填写`' v-model='addParams.menuN' rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div v-if="menuType == 'three'">
          <span class="title">菜单路径</span>
          <div class="name">
            <w-input :holder='`请填写`' v-model="addParams.path" rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 修改菜单 -->
    <w-panel-validate v-model="modifyMenuPanel"  :panel-title="true" title="修改菜单" :width="`380px`" :height="`316px`" @on-confirm='submitOption'>
      <div class="panel-classify">
        <div>
          <span class="title">菜单编号</span>
          <div class="name">
            <w-input :holder='`请填写`' v-model="updateParams.menuCode" rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div>
          <span class="title">菜单名称</span>
          <div class="name">
            <w-input :holder='`请填写`' v-model='updateParams.menuName' rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div v-if="menuType == 'three'">
          <span class="title">菜单路径</span>
          <div class="name">
            <w-input :holder='`请填写`' v-model="updateParams.path" rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 删除菜单 -->
    <w-panel-fixed-wrap v-model="delMenuPanel"  :panel-title="true" title="删除菜单" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除菜单
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api.js'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      all: false,
      columns: [
        {title: '菜单名称', width: '70%'},
        {title: '操作', width: '30%'}
      ],
      // 获取菜单列表的参数
      params: {
        accessToken: '',
        type: 'all',
        currentPage: '1',
        showCount: '2'
      },
      // 菜单列表
      menuList: [],
      menuType: '',
      menuPanel: false, // 新增一级菜单弹框
      modifyMenuPanel: false, // 修改菜单
      delMenuPanel: false,
      // 修改菜单 -- 参数
      updateParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        menuName: '',
        menuCode: '',
        path: ''
      },
      // 新增菜单 -- 参数
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        menuC: '',
        menuN: '',
        path: ''
      },
      // 选中的菜单id 集合
      checkedID: [],
      // 删除菜单 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: []
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.params.accessToken = this.token
    this.updateParams.accessToken = this.token
    this.addParams.accessToken = this.token
    this._getMenuList()
  },
  methods: {
    ...mapActions(['fetchMenuList']),
    // 获取菜单列表
    _getMenuList() {
      apiSystemMange.getMenuLis(this.params).then(data => {
        if (data.code != 200) return
        this.menuList = data.data
        if (this.menuList.menu.length) {
          this.menuList.menu.forEach(v => {
            this.$set(v, 'isShow', true)
            if (v.twoList && v.twoList.length > 0) {
              v.twoList.forEach(val => {
                this.$set(val, 'isShow', true)
              })
            }
          })
        }
      })
    },
    // 分页
    changePage(index) {
      this.params.currentPage = index
      this._getMenuList()
    },
    // 修改菜单
    modifyMenu(id, name, code, path) {
      // 显示修改菜单面板
      this.modifyMenuPanel = true
      this.menuType = ''

      this.updateParams.id = id
      this.updateParams.menuName = name
      this.updateParams.menuCode = code
      if (path) {
        this.menuType = 'three'
        this.updateParams.path = path
      }
    },
    // 修改菜单 -- 提交
    submitOption() {
      apiSystemMange.updateMenu(this.updateParams).then(data => {
        if (data.code != 200) return
        this.$toast('修改成功', () => {
          this.modifyMenuPanel = false
          this._getMenuList()
          this.fetchMenuList(this.token)
        })
      })
    },
    // 新增菜单 弹框
    openPanel(type, id) {
      this.menuPanel = true
      this.menuType = type
      this.addParams.id = id
    },
    // 新增菜单 -- 提交
    submitAddMenu() {
      apiSystemMange.addMenu(this.addParams).then(data => {
        if (data.code != 200) return
        this.$toast('新增成功', () => {
          this.menuPanel = false
          this.addParams.id = ''
          this.addParams.menuC = ''
          this.addParams.menuN = ''
          this.addParams.path = ''
          this.changePage(1)
          this.fetchMenuList(this.token)
        })
      })
    },
    // 选中菜单集合
    checkedMenu() {
      this.checkedID = []
      let flag = true // 判断是否全选

      this.menuList.menu.forEach(v => {
        if (v.isChecked) {
          this.checkedID.push(v.oneMenuId)
        } else {
          flag = false
        }
        if (v.twoList && v.twoList.length > 0) {
          v.twoList.forEach(val => {
            if (val.isChecked) {
              this.checkedID.push(val.twoMenuId)
            } else {
              flag = false
            }
            if (val.threeList && val.threeList.length > 0) {
              val.threeList.forEach(value => {
                if (value.isChecked) {
                  this.checkedID.push(value.threeMenuId)
                } else {
                  flag = false
                }
              })
            }
          })
        }
      })
      // 全选
      if (flag) {
        this.all = true
      }
    },
    // 全选
    checkedAll() {
      this.checkedID = []
      this.menuList.menu.forEach(v => {
        v.isChecked = this.all
        this.checkedID.push(v.oneMenuId)
        if (v.twoList && v.twoList.length > 0) {
          v.twoList.forEach(val => {
            val.isChecked = this.all
            this.checkedID.push(val.twoMenuId)
            if (val.threeList && val.threeList.length > 0) {
              val.threeList.forEach(value => {
                value.isChecked = this.all
                this.checkedID.push(value.threeMenuId)
              })
            }
          })
        }
      })
    },
    // 删除菜单
    deleteMenu(id) {
      if (id != 'all') {
        this.delParams.ids = [id]
      } else {
        if (this.checkedID.length) {
          this.delParams.ids = this.checkedID
        } else {
          this.$toast('请先选择需要删除的菜单')
          return
        }
      }
      this.delMenuPanel = true
      this.delParams.accessToken = this.token
    },
    // 删除菜单 -- 提交
    delOption() {
      apiSystemMange.delMenu(this.delParams).then(data => {
        this.$toast('删除成功！', () => {
          this.delMenuPanel = false
          this.checkedID = []
          this.all = false
          this.changePage(1)
          this.fetchMenuList(this.token)
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .btn {
    font-size: 12px;
  }
  .m-checkbox .check-btn {
    width: 16px !important;
    height: 16px !important;
  }
  .m-checkbox input:checked + .check-btn::before {
    top: 9px !important;
    left: 0 !important;
  }
  .m-checkbox input:checked + .check-btn::after {
    top: 5px !important;
    left: 3px !important;
  }
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-classify-mange {
  padding-bottom: 30px;
}
.add-btn {
  margin: 20px 0 10px;
}
.menu {
  height: 46px;
  line-height: 46px;
  &.three {
    border-top:  1px solid $border-gray-light;
  }
}
.classify-one {
  border-top:  1px solid $border-gray-light;
}
.m-add-options {
  .add-classify {
    width: 100%;
    font-size: 12px;
    border: 1px solid $border-gray-light;
    border-top: none;
    & > div {
      padding-left: 1%;
      &:first-child {
        border-top: 0;
      }
    }
    
  }
  .add {
    border: 1px solid #DBDBDB;
    width: 70px;
    height: 22px;
    border-radius: 2px;
    font-size: 12px;
    margin-left: 10px; 
  }
  .icon-classify {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 12px;
    vertical-align: sub;
    cursor: pointer;
    &.icon-more {
      background: url(../../assets/classify-more-big.png) no-repeat;
    }
    &.icon-little {
      background: url(../../assets/classify-big.png) no-repeat;
    }
  }
  .clssify {
    width: 70%;
    display: inline-block;
  }
  .options {
    width: 30%;
    display: inline-block;
    text-align: center;
    & > div {
      display: inline-block;
      margin: 0 20px;
      cursor: pointer;
    }
    .icon-edit {
      width: 12px;
      height: 12px;
      vertical-align: sub;
      background: url(../../assets/icon-edit.png) no-repeat;
      display: inline-block;
      cursor: pointer;
    }
    .icon-del {
      display: inline-block;
      width: 12px;
      height: 12px;
      vertical-align: sub;
      background: url(../../assets/del-bush.png) no-repeat;
      cursor: pointer;
    }
  }
}
.panel-classify {
  width: 306px;
  margin: 0 auto;
  & > div {
    margin-bottom: 20px;
  }
  .title {
    display: inline-block;
    width: 70px;
    text-align: left;
  }
  .name {
    display: inline-block;
    width: 230px;
  }
}
.icon-text {
  color: $color-text-bule;
}
.icon-checkbox {
  display: inline-block;
  line-height: 12px;
  margin-right: 75px;
}
.all-checked {
  padding-left: 1%;
  line-height: 46px;
}
</style>